<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- style最好不要写type="text/css" -->
    <style type="text/css" th:inline="css">
        #textColor{
            color: [[${textColor}]];
        }
        h3{
            color: [[${textColor}]];
        }
        .red{
            color: [[${textColor}]];
        }
    </style>
    <script th:inline="javascript">
            function changeColor() {
            document.getElementById("p1").style.color=[[${textColor}]];
             }
    </script>
    </script>
</head>
<body>
<h5>内联表达式：th:inline [[]]  可以用在HTML css js ，通过thymeleaf将数据设置到Html，css js 代码中</h5>
<p th:text="${content}"></p>
<p >[[${conten}}]]</p>
<br>
<br>
<p id="textColor" >CSS内联</p>
<h3>CSS内联</h3>
<h4 class="red">CSS内联</h4>
<br>
<br>
<button onclick="changeColor()">改变颜色</button>
<p id="p1">点击按钮文字变成红色</p>


</body>